<template>
    <div class="register">
        <el-form :model="registerUser"
                 label-position="top"
                 :rules="rules"
                 ref="registerUser"
                 hide-required-asterisk
                 status-icon>
            <el-form-item prop="email">
                <el-input v-model="registerUser.email" minlength="6" placeholder="请输入邮箱地址" clearable autofocus>
                    <template slot="prepend">注册邮箱</template>
                </el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input v-model="registerUser.password" placeholder="请输入密码" show-password clearable>
                    <template slot="prepend">登录密码</template>
                </el-input>
            </el-form-item>
            <el-form-item prop="rePassword">
                <el-input v-model="registerUser.rePassword" placeholder="重复输入密码" show-password clearable>
                    <template slot="prepend">重复密码</template>
                </el-input>
            </el-form-item>
            <el-row :gutter="0">
                <el-col :span="24" align="left">
                    <el-checkbox style="padding-bottom: 20px" v-model="agreement">注册即代表同意 <a href="">《XXX注册协议》</a>
                    </el-checkbox>
                </el-col>
            </el-row>
            <el-form-item>
                <el-button :disabled="!agreement" style="width: 100%" type="primary" @click="register('registerUser')">
                    注册
                </el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import {registerNewUser} from '../services'
    import MD5 from 'js-md5'

    export default {
        name: "Register",
        data() {

            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else if (value.length < 6 || value.length > 18) {
                    callback(new Error("密码长度为6~18位"))
                } else {
                    callback();
                }
            };
            var validateEmailUnique = (rule, value, callback) => {
                if (this.checkUserNameUnique(value)) {
                    callback(new Error("该邮箱地址已经注册"))
                } else {
                    callback()
                }
            };
            var validateRePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value.length < 6 || value.length > 18) {
                    callback(new Error("密码长度为6~18位"))
                } else if (value !== this.registerUser.password) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return {
                agreement: false,
                registerUser: {},
                rules: {
                    email: [
                        {required: true, message: '请输入邮箱地址', trigger: 'blur'},
                        {type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur']},
                        {validator: validateEmailUnique, trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '不能为空', trigger: 'blur'},
                        {validator: validatePass, trigger: 'blur'}
                    ],
                    rePassword: [
                        {required: true, message: '不能为空', trigger: 'blur'},
                        {validator: validateRePass, trigger: 'blur'}
                    ]
                }
            }
        },
        created() {
            this.initRegisterUser();
        },
        methods: {

            initRegisterUser() {
                this.agreement = false
                this.registerUser = {
                    email: "",
                    password: "",
                    rePassword: ""
                }
            },
            register(registerUser) {
                let _this = this;
                //todo 接入注册api
                this.$refs[registerUser].validate((valid) => {
                    if (valid) {
                        // console.log(_this.registerUser)
                        let user = {
                            email: _this.registerUser.email,
                            password: MD5(_this.registerUser.password)
                        };
                        registerNewUser(user).then(res => {
                            if (res.code === 2000) {
                                // this.initRegisterUser()
                                this.$emit('reLoadActive', "loginTab")
                            }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                })
            },
            checkUserNameUnique(username) {
                //todo 接入验证用户名唯一性接口
                if (username === "chenjian2952@163.com") {
                    // 已经使用返回true
                    return true;
                } else {
                    return false;
                }
            }
        }
    }
</script>

<style scoped>

</style>